import * as React from "react";
import * as ReactDOM from "react-dom";

import { Index } from "./components/Index";

interface rootstates {
    time: string
}
interface rootpops {
    name: string
}

const ThemeContext = React.createContext('light');

class Root extends React.Component<rootpops, rootstates>{

    constructor(props: rootpops) {
        super(props);
        let time: string = new Date().toLocaleTimeString()
        this.state = {
            time: time
        };
    }

    render() {
        let $this = this
        setInterval(function () {
            $this.setState({
                time: new Date().toLocaleTimeString()
            })
        }, 1000)
        return (
            <div>
                <ThemeContext.Provider value="dark">
                    <div>rootName:{this.props.name}</div>
                    <Index time={this.state.time} />
                </ThemeContext.Provider>

            </div>

        )
    }
}


ReactDOM.render(
    <Root name="@rootName" />,
    document.getElementById("example")
);